<template>
  <div class="product_list" :style="{ 'height': productsHeight }">
    <div class="page_img"></div>
    <div class="header">
      <van-nav-bar title="供应商" class="nav_bar" />
    </div>
    <div class="product_list_header">
      <div style="" class="product_list_serch-text">
        <van-search class="product_list_serch1" placeholder="请输入供应商名称" @search="onSearch" v-model="searchValue"
          shape="round" clearable>
          <template #left-icon>
            <div class="search_l_bt"></div>
          </template>
          <template #right-icon>
            <div class="search_r_bt" @click="onSearch">搜索</div>
          </template>
        </van-search>

      </div>
      <div class="product_list_serch">
        <div class="product_list_serch_div">
          <div class="product_list_serch_div_line" :style="{
            transform: `translateX(${offset}vw)`,
            transition: 'transform 0.5s ease-out',
          }">
            <div v-for="(item, index) in searchList" :style="{ 'margin-left': index == 0 ? '' : '2.6vw' }"
              :class="serchListActive == index && 'product_list_serch_active'" :key="index"
              class="product_list_serch_item" @click="handleSerchList(index, item.status)">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh"
      :style="{ 'height': refreshHeight, backgroundColor: '#fff' }">
      <van-list v-model:loading="loading" :finished="finished" @load="onLoad" offset="50">
        <template v-slot:finished>
          <div class="nothing_div" v-if="list.length == 0">
            <van-image :src="nothingData"></van-image>
            <div class="nothing_font">暂无数据</div>
          </div>
        </template>
        <div class="product_list_van_list">

          <div v-for="(item, index) in list" :key="index">


            <div class="product_list_van_list_div" @click="handleGetDetails(item.id)">
              <div class="div_right">
                <div class="div_right_top">
                  <div class="style_name">
                    {{ item.supplierName }}
                  </div>
                  <div class="div_right_top_img" v-if="item.bigBrandStatus == 1">大品牌免签</div>
                </div>

                <div class="div_right_bottom">
                  <div class="div_right_bottom_div">
                    <div class="value">{{ item.productsCount }}</div>
                    <div class="label">商品总数</div>
                  </div>
                  <div class="b_line"> </div>
                  <div class="div_right_bottom_div">
                    <div class="value">{{ item.productsShopping }}</div>
                    <div class="label">上架总数</div>
                  </div>
                  <div class="b_line"> </div>
                  <div class="div_right_bottom_div">
                    <div class="value">{{ item.productsOpt }}</div>
                    <div class="label">选品数</div>
                  </div>
                </div>
                <div class="div_right_center">
                  <div class="contract">
                    <div :style="{
                      color: item.sellStatus == '1' ? '#19D11B' : '#FC2540',
                      backgroundColor: item.sellStatus == '1' ? '#E7FDEE' : '#FDE7E7',
                    }">
                      供销合同
                      <van-image class="van-image"
                        :src="item.sellStatus == '1' ? icon_duihaolvse : icon_wenhaohongse"></van-image>
                    </div>
                  </div>
                  <div class="contract_break">
                    <div :style="{
                      color: item.discountStatus == '1' ? '#19D11B' : '#FC2540',
                      backgroundColor: item.discountStatus == '1' ? '#E7FDEE' : '#FDE7E7',
                    }">
                      破价合同
                      <van-image class="van-image"
                        :src="item.discountStatus == '1' ? icon_duihaolvse : icon_wenhaohongse"></van-image>
                    </div>
                  </div>
                  <div class="contract_break">
                    <div :style="{
                      color: item.depositStatus == '1' ? '#19D11B' : '#FC2540',
                      backgroundColor: item.depositStatus == '1' ? '#E7FDEE' : '#FDE7E7',
                    }">
                      保证金协议
                      <van-image class="van-image"
                        :src="item.depositStatus == '1' ? icon_duihaolvse : icon_wenhaohongse"></van-image>
                    </div>
                  </div>
                </div>

              </div>
            </div>
            <div class="line"></div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>

  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, watch, onUnmounted } from "vue";
import {
  getHmSupplierMyList,
  productSelectionList,
  noProductSelectionList,
} from "@/api/supplierList/index";
import { useRouter } from "vue-router";
const icon_duihaolvse = new URL("@/assets/productHome/icon_duihaolvse1.png", import.meta.url).href;
const icon_wenhaohongse = new URL("@/assets/newui/productList/icon_hongsecha@2x.png", import.meta.url).href;
const router = useRouter();
const nothingData = new URL(
  "@/assets/porduct/icon_zanwushuju.png",
  import.meta.url
).href;
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  supplierName: "",
  sellStatus: "",
});
const searchValue = ref("");
const searchList = ref([
  {
    name: "全部",
    index: 0,
    status: "",
  },
  {
    name: "已签合同",
    index: 1,
    status: "1",
  },
  {
    name: "未签合同",
    index: 2,
    status: "0",
  },
  {
    name: "已选品",
    index: 3,
    status: "2",
  },
  {
    name: "无选品",
    index: 4,
    status: "3",
  },
]);
const serchListActive = ref(0);
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const list = ref<any[]>([]);
/** 滑动距离 */
const offset = ref(0);
const defaultPhoneHeight = ref(0); //屏幕默认高度
const nowPhoneHeight = ref(0); //屏幕现在的高度
const productsHeight = ref();
const refreshHeight = ref();
// 限制连续刷新数据重复问题
const refreFlag = ref(true);
// 限制快速切换数据乱序问题
const serchFlag = ref(true);
// 在组件挂载完成后添加事件监听器
onMounted(() => {
  defaultPhoneHeight.value = window.innerHeight;
  // 添加事件监听器
  window.addEventListener("resize", handleResize);
});
// 处理窗口大小变化的函数
const handleResize = () => {
  nowPhoneHeight.value = window.innerHeight;
};
// 在组件卸载前移除事件监听器
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
const emits = defineEmits(["doShow"]);
watch(nowPhoneHeight, () => {
  if (defaultPhoneHeight.value != nowPhoneHeight.value) {
    // 当软键盘弹出,改变bottomIsSHow变量然后去控制bottom的显示与隐藏
    emits("doShow", false);
    productsHeight.value = "calc(100vh - 11.7vw)";
    refreshHeight.value = "calc(100vh - 37.3vw)";
  } else {
    // 相等代表软键盘收起后,与上同理
    emits("doShow", true);
    productsHeight.value = "calc(100vh - 25.0vw)";
    refreshHeight.value = "calc(100vh - 50.6vw)";
  }
});

const onSearch = () => {
  queryParams.value.supplierName = searchValue.value;
  onRefresh();
};
const handleSerchList = async (index: number, status: string) => {
  if (serchFlag.value) {
    serchFlag.value = false;
    serchListActive.value = index;
    queryParams.value.sellStatus = status;

    finished.value = false; // 清空列表数据
    refreshing.value = false;
    loading.value = true; // 加载状态
    queryParams.value.pageNum = 1; // 分页数赋值为1
    list.value = []; // 清空数组
    await onLoad(); // 重新加载数据
  }
};
/** 品类回显 */
// const handleExtraData = (data) => {
//   if (data) {
//     const list: any[] = [];
//     data.forEach((element: any) => {
//       if (list.indexOf(element.type) == -1) {
//         list.push(element.type);
//       }
//     });
//     return list.join(",");
//   }
// };
/** 获取详情 */
const handleGetDetails = (id: string) => {
  router.push(`/supplierDetail/${id}`);
};
/** 查询商品列表 */
const getList = async () => {
  serchFlag.value = false;
  var res;
  // 已选品
  if (serchListActive.value == 3) {
    res = await productSelectionList({
      supplierName: queryParams.value.supplierName,
      pageNum: queryParams.value.pageNum,
      pageSize: queryParams.value.pageSize,
    });
    // 未选品
  } else if (serchListActive.value == 4) {
    res = await noProductSelectionList({
      supplierName: queryParams.value.supplierName,
      pageNum: queryParams.value.pageNum,
      pageSize: queryParams.value.pageSize,
    });
  } else {
    res = await getHmSupplierMyList(queryParams.value);
  }
  setTimeout(() => {
    refreFlag.value = true;
    // 空数据 停止加载
    if (res.rows.length == 0) {
      list.value = [];
      finished.value = true;
      serchFlag.value = true;
      return;
    }
    // 有数据 赋值列表 加载状态结束
    res.rows.forEach((item) => {
      finished.value = false;
      serchFlag.value = true;
      list.value.push(item);
    });
    loading.value = false;
    refreshing.value = false;
    serchFlag.value = true;
    // 如果list长度大于等于总数据条数，数据全部加载完成
    if (list.value.length >= res.total) {
      finished.value = true; //结束加载
    }
  }, 400);
};
/** 加载更多 */
const onLoad = async () => {
  getList();
  queryParams.value.pageNum++;
};
/** 下拉 */
const onRefresh = () => {
  if (refreFlag.value && serchFlag.value) {
    serchFlag.value = false;
    refreFlag.value = false;
    finished.value = false; // 清空列表数据
    refreshing.value = false;
    loading.value = true; // 加载状态
    queryParams.value.pageNum = 1; // 分页数赋值为1
    list.value = []; // 清空数组
    onLoad(); // 重新加载数据
  } else {
    finished.value = false;
    refreshing.value = false;
  }
};
</script>
<style lang="less" scoped>
.product_list {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  background: url("@/assets/newui/productList/icon_shangpinbeijing@2x.png");
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;

  .page_img {
    background: url("@/assets/newui/productList/supplierList@2x.png");
    background-size: 100% 100%;
    position: absolute;
    width: 60px;
    height: 60px;
    top: 52px;
    right: 63px;
  }

  .header {
    filter: blur(0px);
    height: 90px;
    padding-top: 44px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    z-index: 6003;

    :deep(.van-icon-arrow-left) {
      color: #1a1b1c !important;
    }

    :deep(.van-nav-bar__title) {
      color: #1a1b1c !important;
      font-size: 18px !important;
      font-weight: 600 !important;
    }

    :deep(.van-nav-bar) {
      background: none !important;

      &::after {
        display: none !important;
      }
    }

    :deep(.van-nav-bar__content) {
      background-color: transparent !important;
    }
  }

  .nothing_div {
    width: 100%;
    margin: auto;
    text-align: center;
    margin-top: 20vh;
    font-weight: 400;
    font-size: 12px;
    color: #b8beca;
    line-height: 12px;
    flex-wrap: wrap;

    .van-image {
      width: 160px;
      height: 160px;
    }
  }

  .product_list_header {
    width: 375px;
    // height: 150px;

    :deep .van-search__field {
      background-color: #fff;
      border-radius: 20px;
    }

    .product_list_serch-text {
      display: flex;
      align-items: center;
      width: 100%;
      height: 50px;
      position: relative;
      box-sizing: border-box;
      padding: 0 15px;
    }



    .product_list_serch1 {
      display: flex;
      align-items: center;
      width: 100%;
      height: 34px;
      padding: 0px;
      box-sizing: border-box;
      overflow: hidden;
      background-color: #fff;
      border: 1px solid #0094ff;
      border-radius: 20px;

      :deep .van-search__content {
        height: 35px;
        background-color: #fff;
      }

      :deep .van-search__field {
        height: 35px;
      }

      :deep .van-field__clear {
        right: 0px !important;
      }

      .search_l_bt {
        width: 14px;
        height: 14px;
        background-image: url("@/assets/newui/productList/icon_sousuo@2x.png");
        background-size: 100% 100%;
      }

      .search_r_bt {
        width: 54px;
        height: 26px;
        background: linear-gradient(146deg, #0064ff 0%, #008fff 100%);
        border-radius: 14px;
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
        line-height: 26px;
        text-align: center;
        transform: translateX(5px);
      }
    }
  }

  .product_list_serch {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;

    position: relative;
    background-color: #fff;
    border-radius: 15px 15px 0px 0px;


    &_div {
      width: 100%;
      padding: 0 15px;
      padding-top: 15px;
      padding-bottom: 10px;
      overflow: hidden;
      box-sizing: border-box;
      overflow-x: auto;

      &::-webkit-scrollbar {
        display: none;
      }

      &_line {
        display: flex;
        width: fit-content;
      }
    }

    :deep .van-image {
      width: 20px;
      height: 20px;
    }

    &_item {
      color: #8492AD;
      text-align: center;
      font-size: 14px;
      line-height: 30px;
      width: 86px;
      height: 30px;
      background: #F7F7F7;
      border-radius: 15px;
      flex-shrink: 0;
    }

    &_active {
      color: #fff;
      background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
    }
  }

  :deep .van-pull-refresh {
    height: calc(100vh - 245px);
    overflow: scroll;
  }

  .product_list_van_list {
    // min-height: calc(100vh - 140px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    .line {
      height: 8px;
      background: #F6FAFF;
    }

    .product_list_van_list_div {
      width: 100%;
      box-sizing: border-box;
      background-color: #fff;
      padding: 15px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
    }

    .div_right {
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .div_right_top {
        height: 20px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .style_name {
          width: 0px;
          flex: 1;
          font-weight: 500;
          font-size: 16px;
          color: #1A1B1C;
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .div_right_top_img {
          width: 105px;
          height: 22px;
          background: linear-gradient(136deg, #E9D1A5 0%, #CEA46C 100%);
          border-radius: 5px;
          font-weight: 500;
          font-size: 12px;
          color: #1B1714;
          line-height: 22px;
          text-align: center;
          margin-left: 10px;
        }

        .stats {

          padding: 2px 4px;
          line-height: 18px;
          font-size: 12px;
          color: #a3a3a3;
          text-align: center;
          border-radius: 3px;
        }
      }

      .div_right_center {
        width: 100%;
        color: #a3a3a3;
        margin-top: 10px;
        font-size: 12px;
        display: flex;
        align-items: center;



        .contract {

          div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 105px;
            height: 22px;
            border-radius: 5px;

            .van-image {
              width: 12px;
              height: 12px;
              margin-left: 5px;
            }
          }
        }

        .contract_break {
          margin-left: 15px;

          div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 105px;
            height: 22px;
            border-radius: 5px;

            .van-image {
              width: 12px;
              height: 12px;
              margin-left: 5px;
            }
          }
        }
      }

      .div_right_bottom {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        margin-top: 7px;
        background: #F7F7F799;
        border-radius: 5px;
        box-sizing: border-box;
        padding: 10px 0;

        .b_line {
          width: 1px;
          height: 19px;
          background-color: #ECECF2;
        }

        .div_right_bottom_div {
          width: 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;

          .label {
            font-weight: 400;
            font-size: 12px;
            color: #8492AD;
            line-height: 12px;
            text-align: left;
            font-style: normal;
            text-transform: lowercase;
            margin-top: 5px;
          }

          .value {
            font-weight: 500;
            font-size: 12px;
            color: #1A1B1C;
            line-height: 12px;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }
  }
}
</style>
